<template>
  <block v-if="isShow()">
    <view v-if="hideBtn" :style="{ backgroundColor: bgColor, textAlign: 'center' }" class="u-navbar">
      <view
          v-if="fixed"
          :style="{
          height: $u.addUnit($u.getPx(height) + $u.sys().statusBarHeight,'px'),
        }"
          class="u-navbar__placeholder"
      ></view>
      <view :class="[fixed && 'u-navbar--fixed']">
        <u-status-bar v-if="safeAreaInsetTop" :bgColor="bgColor"></u-status-bar>
        <view :class="[border && 'u-border-bottom']" :style="{ height: contentHeight, backgroundColor: bgColor }"
              class="u-navbar__content">
          <view class="u-navbar__content__left" hover-class="u-navbar__content__left--hover" hover-start-time="150"
                style="position: relative;">
            <text :style="[{ height: contentHeight, lineHeight: contentHeight, margin: '0 auto' }, $u.addStyle(titleStyle)]"
                  class="u-line-1 u-navbar__content__title">
              {{ title }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <u-navbar v-else :autoBack="true" :bgColor="bgColor" :placeholder="true" :title="title"></u-navbar>
  </block>
</template>

<script>
import props from './props.js';

/**
 * Navbar 自定义导航栏
 * @property {Boolean}      h5Show        是否在h5模式下显示 （默认 false ）
 * @property {Boolean}      hideBtn        是否隐藏返回按钮 （默认 false ）
 */
export default {
  mixins: [props],
  props: {
    h5Show: Boolean,
    hideBtn: Boolean,
    back: Boolean,
    home: Boolean
  },
  data() {
    return {
      systemInfo: this.$store.getters.getSystemInfo,
      statusBarHeight: uni.$u.addUnit(uni.$u.getPx(this.height) + uni.$u.sys().statusBarHeight, 'px'),
      contentHeight: uni.$u.addUnit(this.height)
    }
  },
  methods: {
    isShow() {
      if (this.systemInfo.uniPlatform == 'web') {
        return this.h5Show
      }
      return true;
    }
  }
}
</script>

<style lang="scss" scoped>
.u-navbar {

  &--fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 11;
  }

  &__content {
    @include flex(row);
    align-items: center;
    height: 44px;
    background-color: #9acafc;
    position: relative;
    justify-content: center;

    &__left,
    &__right {
      padding: 0 13px;
      position: absolute;
      top: 0;
      bottom: 0;
      @include flex(row);
      align-items: center;
    }

    &__left {
      left: 0;

      &--hover {
        opacity: 0.7;
      }

      &__text {
        font-size: 15px;
        margin-left: 3px;
      }
    }

    &__title {
      text-align: center;
      font-size: 16px;
      color: $u-main-color;
    }

    &__right {
      right: 0;

      &__text {
        font-size: 15px;
        margin-left: 3px;
      }
    }
  }
}
</style>